<template>
  <!-- 选择旅客，选择身份类型 -->
  <view v-show="hideModal" class="container">
    <view class="mask" @touchmove.stop.prevent @click.stop="close()" />
    <view :class="devtools==='ios'?'content-ios bottom-pos':'content bottom-pos'" :animation="animationData" @touchmove.stop.prevent>
      <!-- 旅客 -->
      <view class="traveler">
        <!-- 头部，关闭部分 -->
        <view class="traveler-head">
          <text>{{ query.type==='ID'?'选择证件类型':'常用旅客' }}</text>
          <image src="@/static/image/default/contacts/close.png" @click.stop="close()" />
        </view>
        <!--展示部分-->
        <view v-if="query.type==='ID'" class="ID-content">
          <view>
            <radio-group @change="radioChange">
              <label v-for="(item, index) in items" :key="item.value" class="ID-label">
                <view>
                  <radio :value="item.value" color="#306DE9" :checked="index === current" />
                </view>
                <view>{{ item.name }}</view>
              </label>
            </radio-group>
          </view>
        </view>
        <scroll-view v-else class="traveler-content" scroll-y @scrolltolower="scrolltolower">
          <view>
            <radio-group @change="travelerRadioChange">
              <label v-for="(item, index) in guestList" :key="index" class="traveler-label">
                <view>
                  <radio :value="item.uid" color="#306DE9" :checked="index === travelerCurrent" />
                </view>
                <view>{{ item.full_name }}</view>
                <view>{{ commonDictMap[item.id_type_display] }}</view>
                <view>{{ item.id_no }}</view>
              </label>
            </radio-group>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import { getGuest } from '@api/mine'
import { get } from '@utils/storage'
import { idTypeitems } from '@utils/parameter'
import { extractionAnimation } from '@utils/myApproach'
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    query: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      hideModal: false, // 模态框的状态  true-隐藏  false-显示
      animationData: {}, //
      val: 0,
      items: idTypeitems,
      pagingData: {
        page: 1,
        limit: 10
      },
      guestList: [],
      current: 0,
      travelerCurrent: -1,
      commonDictMap: this.$commonDictMap,
      antiShake: null
    }
  },
  computed: {
    devtools() {
      return get('devtools')
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.showModal()

        if (this.query.type === 'traveler') {
          // 这个旅客
          this.getGuest()
          console.log(this.pagingData)
        } else {
          for (let i = 0; i < this.items.length; i++) {
            if (this.items[i].value === this.query.id_type) {
              this.current = i
              break
            }
          }
        }
      }
    }
  },
  created() {
    this.antiShake = this.shakeProof(this.dropDowwn, 1000)
  },
  methods: {
    // 显示遮罩层
    showModal: function() {
      var that = this
      that.hideModal = true
      this.animation = extractionAnimation()
      setTimeout(function() {
        that.fadeIn() // 调用显示动画
      }, 50)
    },
    // 隐藏遮罩层
    close: function() {
      var that = this
      this.animation = extractionAnimation()
      this.guestList = []
      that.fadeDown() // 调用隐藏动画
      setTimeout(function() {
        that.hideModal = false
        that.$emit('close', !that.show)
      }, 50) // 先执行下滑动画，再隐藏模块
    },
    // 动画集
    fadeIn: function() {
      this.animation.translateY(0).step()
      this.animationData = this.animation.export() // 动画实例的export方法导出动画数据传递给组件的animation属性
    },
    fadeDown: function() {
      if (this.devtools === 'ios') {
        this.animation.translateY(886).step() // 移动的距离
      } else {
        this.animation.translateY(820).step() // 移动的距离
      }
      this.animationData = this.animation.export()
    },
    // 事件
    getGuest() {
      getGuest(this.pagingData).then((res) => {
        if (this.pagingData.page !== 1 && res.data.data.data.length === 0) {
          return (this.length = 0)
        } else {
          this.length = null
          this.defaultPageDisplay = !!res.data.data.data.length
        }
        res.data.data.data.forEach((item) => {
          this.guestList.push(item)
        })
      })
    },
    radioChange: function(evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.target.value) {
          this.current = i
          break
        }
      }
      this.$emit('updataId', {
        value: evt.target.value,
        index: this.query.index
      })
    },
    travelerRadioChange: function(evt) {
      for (let i = 0; i < this.guestList.length; i++) {
        if (this.guestList[i].uid === evt.target.value) {
          this.current = i
          break
        }
      }
      this.guestList.forEach(item => {
        if (item.uid === evt.target.value) {
          console.log('item', item, this.query.index)
          this.$emit('updataTraveler', {
            value: evt.target.value,
            index: this.query.index,
            code: this.query.code,
            personType: this.query.personType,
            item: item,
            baseNumber: this.query.baseNumber
          })
          return
        }
      })
    },
    scrolltolower() {
      this.antiShake()
    },
    shakeProof(antiShake, delay) {
      let timer
      return function(args) {
        const that = this
        clearInterval(timer)
        timer = setTimeout(() => {
          console.log('执行防抖函数')
          antiShake.call(that, args)
        }, delay)
      }
    },
    dropDowwn() {
      if (this.length === null) {
        getGuest(this.pagingData).then((res) => {
          if (res.data.data.data.length === 10) {
            this.$set(this.pagingData, 'page', this.pagingData.page + 1)
            this.getGuest()
          }
        })
      }
    }
  }
}
</script>
<style >
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  width: 100%;
  height: 820rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 199;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}
.content-ios{
  width: 100%;
  height: 886rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 199;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}
/*动画前初始位置*/
.bottom-pos {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
</style>
<style>
.traveler {
  width: 100%;
  height: 100%;
}
.traveler-head {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  margin-bottom: 48rpx;
}
.traveler-head > text {
  font-size: 32rpx;
  color: #000000;
  font-weight: 400;
  margin-left: 30rpx;
}
.traveler-head > image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 30rpx;
  margin-top: 6rpx;
}
/* 证件类型样式 */
.ID-label {
  font-size: 28rpx;
  display: flex;
  justify-content: start;
  height: 68rpx;
  /* padding-bottom: 18rpx; */
  border-bottom: 2rpx solid #f1f1f1;
  margin-top: 30rpx;
}
.ID-label:nth-child(1) {
  margin-top: 0;
}
.ID-label > view:nth-child(1) {
  margin-left: 30rpx;
}
.ID-label > view:nth-child(2) {
  margin-left: 32rpx;
   margin-top: 6rpx;
}
/* 常用旅客 */
.traveler-content {
   font-size: 28rpx;
  height: 673rpx;
  overflow: hidden;
}
.traveler-label {
  display: flex;
  justify-content: start;
  height: 68rpx;
  /* padding-bottom: 18rpx; */
  border-bottom: 2rpx solid #f1f1f1;
  margin-top: 30rpx;
}
.traveler-label:nth-child(1) {
  margin-top: 0;
}
.traveler-label > view:nth-child(1) {
  width: 10%;
  margin-left: 30rpx;
}
.traveler-label > view:nth-child(2) {
    width: 25%;
    margin-top: 6rpx;
}
.traveler-label > view:nth-child(3) {
  width: 15%;
  margin-top:6rpx;
}
.traveler-label > view:nth-child(4) {
  width: 50%;
  margin-top: 6rpx;
}
</style>
